<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">用户</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入用户ID" [(ngModel)]="seachParams.userId" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">收货人</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入收货人或电话" [(ngModel)]="seachParams.userName" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">填写渠道</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="请选择渠道"
            [(ngModel)]="channlSelected"
            (ngModelChange)="channlChange($event)">
            <ng-container *ngFor="let channl of channlOptions">
              <nz-option [nzLabel]="channl.name" [nzValue]="channl.content"></nz-option>
            </ng-container>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">填写时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="dateArrs"
            (ngModelChange)="timeChange($event)">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableParams.tableLoading" (click)="seachData()">查询</button>
          <button nz-button nzType="default" (click)="resetData()">重置</button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <div class="opera-wrap">
    <button nz-button nzType="primary" (click)="exportTable()">
      <i nz-icon nzType="upload" nzTheme="outline"></i>导出
    </button>
  </div>

  <!-- Table -->
  <div class="pagination-wrap-position">
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1100px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableParams.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableParams.total"
        [nzPageIndex]="tableParams.page"
        [nzPageSize]="tableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="120px" nzLeft>ID</th>
            <th nzAlign="center" nzWidth="120px">状态</th>
            <th nzAlign="center" nzWidth="120px">用户</th>
            <th nzAlign="center" nzWidth="180px">用户注册时间</th>
            <th nzAlign="center" nzWidth="180px">用户审核通过时间</th>
            <th nzAlign="center" nzWidth="150px">填写渠道</th>
            <th nzAlign="center" nzWidth="180px">填写时间</th>
            <th nzAlign="center" nzWidth="150px">收货人</th>
            <th nzAlign="center" nzWidth="150px">收货电话</th>
            <th nzAlign="center" nzWidth="250px">收货地址</th>
            <th nzAlign="center" nzWidth="180px">审核时间</th>
            <th nzAlign="center" nzWidth="180px">出库单号</th>
            <th nzAlign="center" nzWidth="120px" nzRight>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of basicTable.data; let index = index;">
            <td nzAlign="center" nzLeft>{{ data.id }}</td>
            <!-- 状态 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.status | connectLineState: 'color'}">
                {{ data.status | connectLineState: 'text' }}
              </span>
              <i
                *ngIf="data.status == 2"
                nz-icon
                nzType="exclamation-circle"
                nzTheme="outline"
                nz-tooltip
                [nzTooltipTitle]="data.auditReason">
              </i>
            </td>
            <!-- 用户 -->
            <td nzAlign="center">
              <a nz-button nzType="link" target="_blank" [disabled]="!data.userId" [routerLink]="['/customer/tabs', data.userId, 0]">{{ data.userId }}</a>
            </td>
            <!-- 用户注册时间 -->
            <td nzAlign="center">{{ data.regTime || '-' }}</td>
            <!-- 用户审核通过时间 -->
            <td nzAlign="center">{{ data.userAuditTime || '-' }}</td>
            <!-- 填写渠道 -->
            <td nzAlign="center">{{ textConversion(data.platform) }}</td>
            <!-- 填写时间 -->
            <td nzAlign="center">{{ data.createTime || '-' }}</td>
            <!-- 收货人 -->
            <td nzAlign="center">{{ data.userName || '-' }}</td>
            <!-- 收货电话 -->
            <td nzAlign="center">{{ data.tel || '-' }}</td>
            <!-- 收货地址 -->
            <td nzAlign="center">{{ data.area || '' }} {{ data.address || '' }}</td>
            <!-- 审核时间 -->
            <td nzAlign="center">{{ data.auditTime || '-' }}</td>
            <!-- 出库单号 -->
            <td nzAlign="center">
              <a nz-button nzType="link" target="_blank" [disabled]="!data.deliveryId" [routerLink]="['/stock/outDetails', data.deliveryId]">{{ data.outboundNo || '-' }}</a>
            </td>
            <!-- 操作 -->
            <td nzAlign="center" nzRight>
              <ng-container *ngIf="data.status == 0 && permission.userPermission.has('marketing:deliveryActivities:examine');else templateBtn">
                <button nz-button nzType="link" (click)="openModal(data)">审核</button>
              </ng-container>
              <ng-template #templateBtn>-</ng-template>
            </td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
  </div>
</nz-card>

<!-- 审核 Modal START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isExamineVisible"
  nzTitle="审核"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="remarks-wrap">
        <span class="label-sp">备注：</span>
        <nz-textarea-count style="width: 100%;" [nzMaxCharacterCount]="100">
          <textarea rows="4" maxlength="100" nz-input [(ngModel)]="auditDesc"></textarea>
        </nz-textarea-count>
      </div>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" [nzLoading]="adoptLoading" (click)="subExamine(1)">通过</button>
        <button nz-button nzType="primary" nzDanger [nzLoading]="adoptNotLoading" (click)="subExamine(2)">不通过</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 审核 Modal END -->